import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Select, Popconfirm, DatePicker } from 'antd';
import LogModal from '../../components/sys/LogModal';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;

function Log({ dispatch, log, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;

    const columns = [{
        title: '系统用户',
        dataIndex: 'userName',
        key: 'userName',
        width: 100,
    }, {
        title: '真实姓名',
        dataIndex: 'actName',
        key: 'actName',
        width: 100,
    }, {
        title: '操作类型',
        dataIndex: 'operateType',
        key: 'operateType',
        width: 100,
    }, {
        title: '模块',
        dataIndex: 'module',
        key: 'module',
        width: 100,
    }, {
        title: '描述',
        dataIndex: 'description',
        key: 'description',
        width: 150,
    }, {
        title: '操作时间',
        dataIndex: 'operateTime',
        key: 'operateTime',
        width: 150,

    }, {
        title: 'ip',
        dataIndex: 'ip',
        key: 'ip',
        width: 150,

    }, {
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record) => {
            return <span><a onClick={onViewHandler.bind(null, record.id_)}>查看</a></span>;
        },
    }];

    function handleClear() {
        form.resetFields();
    }

    const submitHandle = () => {
        dispatch({
            type: 'log/qryList',
            payload: { ...getFieldsValue() },
        });
    }
    const onViewHandler = (id) => {
        dispatch({
            type: 'log/qryById',
            payload: id,
        });
    }

    const pagination = {
        current: log.current,
        pageSize: log.currentSize,
        total: log.total,
        showSizeChanger: true,
        showTotal: (total => '共' + log.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'log/qryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current, 'pageSize': size } },
            });
        },
        onChange(current) {
            dispatch({
                type: 'log/qryList',
                payload: { ...getFieldsValue(), ...{ 'pageNum': current , 'pageSize':log.currentSize} }
            });
        },
    };

    const modalProps = {
        item: log.currentItem,
        visible: log.viewModalVisible,
        title: "资源",
        newKey : log.newKey,
        type : log.modalType,
        onCancel () {
          dispatch({
            type: 'log/hideViewModal',
          })
        },
    }

    return (
        <div style={{ width: 'auto', backgroundColor: '#fff' }}>
            <div style={{ minHeight: '100%' }}>
                <div style={{ width: '100%', backgroundColor: '#fff', lineHeight: '40px', paddingLeft: '20px', paddingTop: '10px' }}>
                    <Form layout="inline" >
                        <FormItem>
                            {getFieldDecorator('userName')(
                                <Input type="text" placeholder="系统用户" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('actName')(
                                <Input type="text" placeholder="真实姓名" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('ip')(
                                <Input type="text" placeholder="ip" style={{ width: '200px' }} />
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('operateTime')(
                                <RangePicker style={{ width: '250px' }} format="YYYY-MM-DD" />
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                            <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>
                    </Form>
                </div>
                <div style={{ width: '100%', height: '100%', paddingLeft: '20px', paddingTop: '10px', paddingRight: '20px' }}>
                    <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={log.logList} pagination={pagination}
                    />
                </div>
                <LogModal {...modalProps} />     
            </div>
        </div>
    );

}

function mapStateToProps(state) {
    return { log: state.log, loading: state.loading.models.log };
}

Log = Form.create()(Log);

export default connect(mapStateToProps)(Log);
